// 全局组件懒加载
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export function useObserve (apiFn) {
  // 图片懒加载
  const target = ref(null)
  /**
    * 步骤：
    * 1. 通过ref获取要监控的元素或组件
    * 2. 调用useIntersectionObserver(要监控的元素DOM对象或组件实例, 监控的回调函数)=》多次触发
    *    说明：监控函数执行完，可以解构出stop方法=》停止监控
    */
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      console.log('监控回调函数', isIntersecting)
      if (isIntersecting) {
        console.log('进入到可视区，发请求')
        apiFn()
        // 关闭监控
        stop()
      }
    },
    {
      threshold: 0 // 进入后立马触发
    }
  )
  return { target }
}
